// 广州地图标点

<template>
    <div class="v-gzMap2">
        <div class="echarts-box" ref="gzMap"></div>
        <el-alert
            title="下载json文件的网站：https://hxkj.vip/demo/echartsMap/"
            type="info"
            effect="dark">
        </el-alert>
    </div>
    
</template>

<script>
import * as echarts from 'echarts'

export default {
    data() {
        // 引入广州地图点位的json
        let guangzhou = require('@/assets/json/guangzhou.json')

        return {
            guangzhou,
            // echarts实例
            gzMap: null,
            option: {
                tooltip: {
                    trigger: 'item',
                    formatter: (data) => {
                        // console.log(data)
                        // return data.data[3] + ':' + data.data[2]
                        return data.value
                    }
                },
                roam: false,
                visualMap: {
                    // min: 0,
                    max: 100,
                    // text: ['20000分', '0分'],
                    calculable: true,
                    seriesIndex: [1],
                    inRange: {
                        color: ['#92d0ff', '#3c8af5', '#2b63d6']
                    },
                    right: '0%',
                    bottom: '10%'
                },
                geo: {
                    map: 'guangzhou',
                    roam: false,
                    aspectScale: 1.2
                },
                series: [
                    // 配置点位的
                    {
                        name: '值1',
                        type: 'scatter',
                        coordinateSystem: 'geo',
                        data: [
                            {
                                name: '名称11', // 名称
                                value: [113.439171, 23.169201, 66], // 经纬度 + vlaue
                                active: false //自定义加的判断字段
                            }
                        ],
                        symbolSize: 20,
                        symbolOffset: [0, '-50%'],
                        // 设置标点的图片
                        symbol: (data, value) => {
                            console.log(data, value)
                            if (value.data.active) {
                                return 'image://'
                            } else {
                                return 'image://'
                            }
                        }
                    },
                    // 配置热度的
                    {
                        name: '广州',
                        type: 'map',
                        map: 'guangzhou',
                        // 宽高比(要和geo中配置一致，不然会有两个地图)
                        aspectScale:1.2,
                        // 移入区的高亮配置
                        emphasis:{
                            itemStyle: {
                                areaColor: '#ffd9b3',
                            },
                            label: {
                                show: true,
                                color: '#000'
                            }
                        },
                        label: {
                            normal: {
                                show: true,
                                textStyle: {
                                    color: '#333'
                                }
                            }
                        },
                        // 数据模拟
                        data: [
                            {name: "黄埔区", value: 66},
                        ]
                    }
                ]
            }
        }
    },
    mounted() {
        this.gzMap = echarts.init(this.$refs.gzMap)
        echarts.registerMap('guangzhou', this.guangzhou)
        this.gzMap.setOption(this.option)
        window.addEventListener("resize", () => {
            this.gzMap.resize()
        })

        // 添加点击事件
        this.gzMap.on('click', data => {
            console.log(data)
            if (data.componentSubType === 'scatter') {
                this.$message(`点击了点`)
                data.data.active = !data.data.active
                this.gzMap.resize()
                // 多个数据用下面的
                // this.gzMap.setOption(this.option)
            } else if (data.componentSubType === 'map') {
                this.$message(`点击了${data.name}`)
            }
            
        })
    }
}
</script>